import React, { useEffect, useState } from 'react'
import { Image as AntImage } from 'antd-mobile'
import styles from './index.module.less'
import Finger from '../components/Finger'
import Job from '../components/Job'
import { observer, useLocalObservable } from 'mobx-react'
import Store from '../store'
import type { IDossierInfoItem } from '../interface'
import Question from '../components/Question'
import Resume from '../components/Resume'
import Rainbow from '../components/Rainbow'
import Image from '../components/Image'
import PostMatch from '../components/PostMatch'

const chineseNo = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
let resumeTotal = -1

export default observer(() => {
    const store = useLocalObservable(() => new Store())
    const { archivesInfo } = store
    const { dossierInfo, userInfo } = archivesInfo
    const [resumeSuccessCount, setResumeSuccessCount] = useState(0)

    const getCompByType = (type: string, data: any) => {
        const { fill_type, id, rainbow_url } = data.userBarrier || {}
        // 填写类型为上传图片
        if (fill_type === 2) {
            return <Image dataSource={data} />
        }
        // 关卡类型 1.问卷调查 2. 五指图 3.简历 4.意向岗位
        switch (type) {
            case '1':
                return fill_type === 3 && id === '16' ? <PostMatch dataSource={data} /> : <Question dataSource={data} />
            case '2':
                return <Finger dataSource={data} />
            case '3':
                const { userBarrier } = data
                const { detail } = userBarrier
                const length = detail.filter((item: any) => item.fileUrl).length
                resumeTotal = length ? length : resumeTotal

                return (
                    <Resume
                        dataSource={data}
                        onLoadSuccess={() => {
                            setResumeSuccessCount(count => count + 1)
                        }}
                    />
                )
            case '4':
                return <Job dataSource={data} />
            case '5':
                return rainbow_url?.url ? <AntImage className={styles.rainbow_img} src={rainbow_url?.url} /> : <Rainbow dataSource={data} />
            default:
                break
        }
    }

    useEffect(() => {
        if (resumeSuccessCount === resumeTotal) {
            setTimeout(() => {
                document.body.id = 'PUPPETEER_PDF'
            }, 5000)
        }
    }, [resumeSuccessCount])

    return (
        <div className={styles.container}>
            <div className={styles.header_title}>我的求职档案</div>
            <div className={styles.info_card}>
                <div className={styles.info_row}>
                    <span>学员姓名：</span>
                    <span>{userInfo?.name}</span>
                </div>
                <div className={styles.info_row}>
                    <span>班级编号：</span>
                    <span>{userInfo?.class_number}</span>
                </div>
                <div className={styles.info_row}>
                    <span>老师姓名：</span>
                    <span>{userInfo?.teacher_name}</span>
                </div>
                <div className={styles.info_row}>
                    <span>班级名称：</span>
                    <span>{userInfo?.class_name}</span>
                </div>
                <div className={styles.info_row}>
                    <span>导出日期：</span>
                    <span>{userInfo?.export_date}</span>
                </div>
                <div className={styles.info_row}>
                    <span>机构名称：</span>
                    <span>{userInfo?.company_name}</span>
                </div>
            </div>
            {dossierInfo?.map((item: IDossierInfoItem, index: number) => {
                const { id, dossier_name, type, userBarrier } = item
                const { is_finished, update_time } = userBarrier
                if (index === dossierInfo.length - 1 && resumeTotal < 1) {
                    document.body.id = 'PUPPETEER_PDF'
                }
                if (is_finished === '0') {
                    return null
                }
                let no = chineseNo[index]
                if (index >= 10) {
                    no = String(index)
                        .split('')
                        .map((idx: string, i: number) => {
                            return i === 0 ? chineseNo[Number(idx) - 1 > 0 ? Number(idx) - 1 : -1] || '' : chineseNo[Number(idx)]
                        })
                        .join('十')
                }

                return (
                    <div className={styles.block} key={id}>
                        <div className={styles.block_title}>
                            <span className={styles.title_text}>{dossier_name}</span>
                            <span className={styles.date_time}>最近一次编辑 {update_time}</span>
                        </div>
                        {getCompByType(type, item)}
                    </div>
                )
            })}
        </div>
    )
})
